<template>
  <div>
    <h1>父组件</h1>
    <p>房产: {{ house }}套</p>
    <button @click="handleToy">修改子组件的玩具</button>
    <button @click="handleAllToy($refs)">修改所有子组件的玩具</button>
    <Child1 ref="c1"/>
    <Child2 ref="c2" />
  </div>
</template>

<script lang="ts" setup>
import Child1 from './child1.vue'
import Child2 from './child2.vue'
import {ref} from 'vue'
let house = ref(4)
let c1 = ref()
let c2 = ref()
// 修改子组件的值
function handleToy(){
  c1.value.toy += '1'
  c1.value.books += 1
}
function handleAllToy(refs){
  Object.values(refs).forEach(item => {
    item.toy += '1'
  })
}
defineExpose({
  house
})
</script>

<style lang="scss" scoped></style>
